<template>
  <div class="allpage" style="width: 100%;margin-top:20px;">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :span="16" style="margin-left:40px;padding:0" class="first">
        <div class="head" style="border: 1px black solid;display:flex;">
          <div id="htitle" style="width: 50%;font-size:36px;color:rgb(6, 255, 230);margin-left:10px">博客</div>
          <div style="flex: 1;text-align:right;font-size:28px;margin-right:10px">共 <span style="font-size: 36px;font-weight:800;color:rgb(245, 67, 67)">{{ total }}</span>篇</div>
        </div>
        <div class="mbody" >
          <!-- 这是一个整体元素 -->
          <el-row style="border: 1px black solid;border-top:none;height:220px" v-for="blog of blogs" :key="blog.id">
            <el-col :span="14">
              <a href="#" class="blogInfo" title="Java学习之路" @click="$router.push('/blog')">
                <div style="margin-left:40px">
                  <div class="cpro" style="text-align:center;">
                    <h1>{{ blog.title }}</h1>
                  </div>
                  <div style="text-align:center;">
                    <p >
                      {{ blog.description }}
                    </p>
                  </div>
                </div>
              </a>
              <a href="#" class="userInfo" :title="blog.username">
                <div style="margin-left: 25px;display:flex">
                  <!-- 用户头像 -->
                  <el-avatar :src="'http://localhost:8081/api/files/'+blog.headImg"></el-avatar>
                  <!-- 用户相关信息 -->
                  <div style="margin-top: 12px;">
                    <span style="margin-left: 25px;">{{ blog.username }}</span>
                    <span style="margin-left: 25px;">{{ blog.updateTime }}</span>
                    <span style="margin-left: 25px;"><i class="el-icon-view"></i>{{ blog.views }}</span>
                    <span style="margin-left: 25px;">
                      <span style="border: 1px #f37e09 solid;border-radius:5px;padding-right:5px;color:#f37e09">
                        {{ blog.typeName }}
                      </span>
                    </span>
                  </div>
                </div>
              </a>
            </el-col>
            <!-- 博客图片 -->
            <el-col :span="10">
              <div class="cimg" style="margin-left: 30px;margin-top:10px;width:250px">
                <!--
                   src 图片地址
                   preview-src-list 预览地址
                 -->
                <el-image 
                  :src="'http://localhost:8081/api/files/'+blog.flag" 
                  :preview-src-list="['http://localhost:8081/api/files/'+blog.flag]">
                </el-image>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="6" style="margin-left:30px;padding:0">
        <el-container style="border: 1px black solid;width: 100%;">
          <el-header style="background-color: rgb(0, 235, 248);display:flex">
            <div style="width:80%">
              <h2>分类</h2>
            </div>
            <div style="text-align: right;margin-top:30px">
              <a href="#">更多</a>
            </div>
          </el-header>
          <el-main>
            <a href="#" :title="type.id" v-for="type of types" :key="type.id">
              <div class="recomment" style="display: flex;border:1px black solid;padding:5px 5px 5px 5px;">
                <div style="width: 80% ;">
                  <span style="font-size: 20px;">{{ type.name }}</span>
                </div>
                <div style="flex:1;"><a href="#">{{ type.count }}</a></div>
              </div>
            </a>
          </el-main>
        </el-container>

        <el-container style="border: 1px black solid;width: 100%;margin-top:100px">
          <el-header style="background-color: rgb(0, 235, 248);display:flex">
            <div style="width:80%">
              <h2>排行榜</h2>
            </div>
            <div style="text-align: right;margin-top:30px">
              <a href="#">更多</a>
            </div>
          </el-header>
          <el-main>
            <a href="#" title="博客名称">
              <div class="recomment" style="display: flex;border:1px black solid;padding:5px 5px 5px 5px;margin-bottom:4px">
                <div style="width: 80% ;">
                  <span style="font-size: 20px;">博客名称</span>
                </div>
                <div style="flex:1;"><i class="iconfont" style="color: red;">&#xe65e;</i></div>
              </div>
            </a>
          </el-main>
        </el-container>

        <el-container style="border: 1px black solid;width: 100%;margin-top:100px">
          <el-header style="background-color: rgb(0, 235, 248);display:flex">
            <div style="width:80%">
              <h2>最新推荐</h2>
            </div>
            <div style="text-align: right;margin-top:30px">
              <a href="#">更多</a>
            </div>
          </el-header>
          <el-main>
            <a href="#" :title="recomment.createTime" v-for="recomment of recommentBlog" :key="recomment.id">
              <div class="recomment" style="display: flex;border:1px black solid;padding:5px 5px 5px 5px;margin-bottom:4px;border-radius:5px">
                <div style="width: 80% ;">
                  <span style="font-size: 20px;">{{ recomment.title }}</span>
                </div>
              </div>
            </a>
          </el-main>
        </el-container>
      </el-col>
    </el-row>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="5"
      :page-count="pageCounts"
      @current-change="pageType"
      style="margin-top: 70px;margin-left:30%">
    </el-pagination>
    <PPUtil></PPUtil>
  </div>
</template>

<script>
import request from '@/utils/request';
import PPUtil from '@/components/PPUtil.vue';
import { nextTick } from 'vue';
export default {
  name:'AllPage',
  data(){
    return{
      typeNumber:0,
      blogs:[],
      types:[],
      total:0,
      pageCounts:0,
      recommentBlog:[]
    }
  },
  components:{PPUtil},
  created(){
    request.get("/user/blogs").then((res) => {
      if(res.code==='200'){
        this.blogs = res.data.list
        this.total= res.data.total
        this.pageCounts = Math.round(this.total/5)
      }
      else{
        this.$notify.warning('抱歉，数据出错了，请稍后再试！')
      }
    })

    request.get('/user/types').then((res) => {
      if(res.code==='200'){
        this.types = res.data
        this.typeNumber=res.data[0].total
      }else{
        this.$notify.error('抱歉，最新推荐获取失败')
      }
      
    })

    request.get('/user/newRecommend').then((res) => {
      if(res.code==='200'){
        console.log(res.data);
        this.recommentBlog = res.data
      }
    })
    
  },
  methods:{
    pageType(page){
      console.log(page)
      request.get(`/user/pageBlog?page=${page}`).then((res) => {
        if(res.code=='200'){
          console.log(res)
          this.blogs = res.data.list
        }
      })
    }
  }
}
</script>

<style scoped>
.first{
  overflow: hidden;
  box-shadow: 10px 10px 15px rgb(181, 181, 181);
}
a{
  text-decoration-line: none;
  font-size: 16px;
  color: rgb(31, 34, 57);
}
.userInfo :hover{
  background-color: rgb(164, 164, 164);
}
.blogInfo :hover{
  background-color: rgb(164, 164, 164);
}
.recomment:hover{
  background-color: aliceblue;
}
</style>